<template>
  <div class="login">
    <van-nav-bar>
      <template #left>
        <div class="logo">
          <img src="../assets/images/home_active.png" class="auto-img" alt="" />
        </div>
        <div class="logo-text">Luckin Coffee</div>
      </template>
      <template #right>
        <div class="guang" @click="goPage('Menu')">先逛一逛</div>
      </template>
    </van-nav-bar>

    <div class="user-box">
      <div>
        <div class="welcome-zhtitle">欢迎回来！</div>
        <div class="welcome-entitle">Please login to your accounts</div>
      </div>
      <div class="form-box">
        <van-form @submit="login">
          <van-field
            v-model="userInfo.phone"
            name="phone"
            label="手机号"
            placeholder="手机号"
            autocomplete="off"
            :rules="[
              { required: true, message: '请填写手机号' },
              { pattern: phoneReg, message: '手机号格式不正确' },
            ]"
          />
          <van-field
            v-model="userInfo.password"
            :type="isopen ? 'text' : 'password'"
            name="password"
            label="密码"
            placeholder="密码(6-16位)"
            autocomplete="off"
            :right-icon="isopen ? 'eye-o' : 'closed-eye'"
            @click-right-icon="togglePasswordStatus"
            :rules="[
              { required: true, message: '请填写密码' },
              {
                pattern: passwordReg,
                message: '支持数字字母下划线组合16位并且以字母开头',
              },
            ]"
          />
          <div class="forget-box">
            <div class="forget-text" @click="goPage('SearchCode')">忘记密码？</div>
          </div>
          <div class="login-btn">
            <van-button round block color="#0c34ba" native-type="submit"
              >登&nbsp;&nbsp;&nbsp;录</van-button
            >
          </div>
          <div class="login-btn">
            <van-button
              round
              block
              native-type="button"
              @click="goPage('Register')"
              >注&nbsp;&nbsp;&nbsp;册</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      userInfo: {
        phone: "",
        password: "",
      },
      isopen: false,
      //   验证手机号
      phoneReg: /^1[3-9]\d{9}$/,
      //   验证密码（数字字母下划线组合并且以字母开头）
      passwordReg: /^[A-Za-z]\w{5,15}$/,
    };
  },
 
  methods: {
    //   登录
    login(values) {
      this.axios({
        method: "post",
        url: "/login",
        data: values,
      })
        .then((res) => {
          this.$toast(res.data.msg);
          if (res.data.code == 200) {
            sessionStorage.setItem('token',res.data.token);
            setTimeout(() => {
              this.$router.push({ name: "Menu" });
            }, 2000);
          }
        })
        .catch((err) => {
          
        });
    },
    togglePasswordStatus() {
      this.isopen = !this.isopen;
    },
    goPage(name) {
      this.$router.push({ name });
    },

  },
};
</script>
<style lang="less" scoped>
.login {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
  .logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
  .logo-box {
    display: flex;
    align-items: center;
  }
  .logo-text {
    margin-left: 10p;
    font-size: 16px;
    font-weight: bold;
    color: #666;
  }
  .guang {
    color: #0c34ba;
    font-weight: bold;
  }
  .user-box {
    margin-top: 80px;
    padding: 15px;
    .welcome-zhtitle {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .welcome-entitle {
      font-size: 16px;
      color: #999;
    }
    .form-box {
      margin-top: 50px;
      .forget-box {
        margin-top: 10px;
        display: flex;
        .forget-text {
          margin-left: auto;
          font-size: 14px;
          color: #666;
        }
      }
      .login-btn {
        margin-top: 50px;
      }
    }
  }
}
</style>